<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
	<title>登录商城</title>
	<link rel="stylesheet" href="style/base.css" type="text/css">
	<link rel="stylesheet" href="style/global.css" type="text/css">
	<link rel="stylesheet" href="style/header.css" type="text/css">
	<link rel="stylesheet" href="style/login.css" type="text/css">
	<link rel="stylesheet" href="style/footer.css" type="text/css">
</head>
<body>
<div id="app">
	<!-- 顶部导航 start -->
	<topnav></topnav>
	<!-- 顶部导航 end -->
	
	<div style="clear:both;"></div>

	<!-- 页面头部 start -->
	<div class="header w990 bc mt15">
		<div class="logo w990">
			<h2 class="fl"><a href="index.html"><img src="images/logo.png" alt="商城"></a></h2>
		</div>
	</div>
	<!-- 页面头部 end -->
	
	<!-- 登录主体部分start -->
	<div class="login w990 bc mt10">
		<div class="login_hd">
			<h2>用户登录</h2>
			<b></b>
		</div>
		<div class="login_bd">
			<div class="login_form fl">
				<form action="" method="post">
					<ul>
						<li>
							<label for="">用户名：</label>
							<input type="text" class="txt" name="username" v-model="loginForm.mobile"/>
						</li>
						<li>
							<label for="">密码：</label>
							<input type="password" class="txt" name="password" v-model="loginForm.password" />
							<a href="">忘记密码?</a>
						</li>
						<li class="checkcode">
							<label for="">验证码：</label>
							<input type="text"  name="checkcode" />
							<img src="images/checkcode1.jpg" alt="" />
							<span>看不清？<a href="">换一张</a></span>
						</li>
						<li>
							<label for="">&nbsp;</label>
							<input type="checkbox" class="chb"  /> 保存登录信息
						</li>
						<li>
							<label for="">&nbsp;</label>
							<input type="button" value="" class="login_btn" @click="submitLogin"/>
						</li>
					</ul>
				</form>

				<div class="coagent mt15">
					<dl>
						<dt>使用合作网站登录商城：</dt>
						<dd class="qq"><a href=""><span></span>QQ</a></dd>
						<dd class="weibo"><a href=""><span></span>新浪微博</a></dd>
						<dd class="yi"><a href=""><span></span>网易</a></dd>
						<dd class="renren"><a href=""><span></span>人人</a></dd>
						<dd class="qihu"><a href=""><span></span>奇虎360</a></dd>
						<dd class=""><a href=""><span></span>百度</a></dd>
						<dd class="douban"><a href=""><span></span>豆瓣</a></dd>
					</dl>
				</div>
			</div>
			
			<div class="guide fl">
				<h3>还不是商城用户</h3>
				<p>现在免费注册成为商城用户，便能立刻享受便宜又放心的购物乐趣，心动不如行动，赶紧加入吧!</p>

				<a href="regist.html" class="reg_btn">免费注册 >></a>
			</div>

		</div>
	</div>
	<!-- 登录主体部分end -->

	<div style="clear:both;"></div>
	<!-- 底部版权 start -->
	<div class="footer w1210 bc mt15">
		<p class="links">
			<a href="">关于我们</a> |
			<a href="">联系我们</a> |
			<a href="">人才招聘</a> |
			<a href="">商家入驻</a> |
			<a href="">千寻网</a> |
			<a href="">奢侈品网</a> |
			<a href="">广告服务</a> |
			<a href="">移动终端</a> |
			<a href="">友情链接</a> |
			<a href="">销售联盟</a> |
			<a href="">商城论坛</a>
		</p>
		<p class="copyright">
			 © 2005-2013 京东网上商城 版权所有，并保留所有权利。  ICP备案证书号:京ICP证070359号 
		</p>
		<p class="auth">
			<a href=""><img src="images/xin.png" alt="" /></a>
			<a href=""><img src="images/kexin.jpg" alt="" /></a>
			<a href=""><img src="images/police.jpg" alt="" /></a>
			<a href=""><img src="images/beian.gif" alt="" /></a>
		</p>
	</div>
	<!-- 底部版权 end -->
</div>
	<script src="js/vue-2.5.17.js"></script>	<!--vue-->
	<script src="js/axios-0.18.0.js"></script>	<!--axios-->
    <script src="http://mockjs.com/dist/mock.js"></script><!--mock官方-->
	<script src="js/mock.js"></script><!--mock数据-->
	<script src="js/api.js"></script><!--api自定义-->
	<script src="components/TopNav.js"></script><!--组件-->
	<script>
		var vm = new Vue({
			el:"#app",
			data:{
				loginForm:{}
			},
			methods:{
				//登录表单提交
				submitLogin(){
					//* 从浏览器中取出购物车中的数据
					let cart = localStorage.getItem('cart')
					//* 判断是否有商品
					if(cart){
						//* 转成json
						cart = JSON.parse(cart)
					}else{
						cart=[]
					}
					//定义提交的数据
					let data = {
						mobile:this.loginForm.mobile,
						password:this.loginForm.password,
						cart:cart
					}
					// 调用登录接口把参数传进去
					login(this.loginForm).then(res=>{
						if(res.data.errno === 0){
							//1.将token保存到本地
							localStorage.setItem('token',res.data.token)
							localStorage.setItem('name',res.data.name)
							//* 清空浏览器中的数据
							localStorage.removeItem('cart')

							//  获取存sessionstorage的数据判断是登录后跳转哪个页面
							let loghtml = sessionStorage.getItem("loghtml")
							if(loghtml!=null){
								//删除缓存的路径
								sessionStorage.removeItem("loghtml")
								location.href=loghtml
							}else{
								//2.登录成功跳转首页
								location.href='index.html'
							}
							
						}else{
							alert(res.data.errmsg)
						}
					})
				},
			}
		})
	</script>
</body>
</html>